<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <myinput
          placeholder="请输入手机号"
          class="input"
          v-model="user.username"
          :rulse="/^1\d{4}$|^1[35789]\d{9}$/"
          msg="请输入5为或11为数字"
        />
        <myinput
          placeholder="密码"
          class="input"
          type="password"
          v-model="user.password"
          :rulse="/^.{3,16}$/"
        />
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <mybutton type="warnary" @click="login">登录</mybutton>
    </div>
  </div>
</template>

<script>
import mybutton from "@/components/mybutton.vue";
import myinput from "@/components/myinput.vue";
// 引入封装好的登录请api求方法
import { login } from "@/apis/user.js";
export default {
  data() {
    return {
      user: {
        username: "10086",
        password: "123",
      },
    };
  },
  components: {
    mybutton,
    myinput,
    // "van-button": Button,
  },
  methods: {
    async login() {
      // 返送axios请求;  封装基准路径
      let res = await login(this.user);
      // console.log(res);
      // 判定如果等于这个值 就跳转页面
      if (res.data.message == "登录成功") {
        // console.log(1);
        // 跳转成功的时候把token 储存到本地储存中
        localStorage.setItem("token", res.data.data.token);
        // 跳转页面  跳转到个人中心页
        this.$router.push({ path: `/personal/${res.data.data.user.id}` });
      } else {
        this.$toast.fail(res.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>